<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">排行榜</view>
    </view>
    <view class="box">
      <view class="box_tabs">
        <u-tabs
          class="tabs"
          :list="listTab"
          @click="click"
          :activeStyle="{
            color: '#444',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
            'font-size': '28rpx',
          }"
          lineColor="#444"
          :inactiveStyle="{
            color: '#888',
            transform: 'scale(1)',
            'font-size': '28rpx',
          }"
          lineWidth="72rpx"
          lineHeight="6rpx"
          :scrollable="false"
        ></u-tabs>
      </view>

      <view class="tab_view">
        <view
          class="tab_view_item"
          :class="selected == 0 ? 'tab_view_item_sel' : ''"
          @click="change(0)"
          >总榜
        </view>
        <view
          class="tab_view_item"
          :class="selected == 1 ? 'tab_view_item_sel' : ''"
          @click="change(1)"
          >今日
        </view>
        <view
          class="tab_view_item"
          :class="selected == 2 ? 'tab_view_item_sel' : ''"
          @click="change(2)"
          >昨日
        </view>
        <view
          class="tab_view_item"
          :class="selected == 3 ? 'tab_view_item_sel' : ''"
          @click="change(3)"
          >本周
        </view>
        <view
          class="tab_view_item"
          :class="selected == 4 ? 'tab_view_item_sel' : ''"
          @click="change(4)"
          >上周
        </view>
      </view>

      <scroll-view
        :style="{
          height: scrollHeihgt + 'px',
        }"
        :scroll-y="true"
      >
        <!-- 我的排名 -->
        <view class="tab_mine">
          <view class="tab_mine_item">
            <image :src="self.avatar_url" mode=""></image>
            <view class="tab_mine_name">{{ self.nick_name }}</view>
          </view>
          <view class="tab_mine_item">
            <view class="tab_mine_num1" v-if="self.paihang == '未上榜'">{{
              self.paihang
            }}</view>
            <view class="tab_mine_num" v-else>{{ self.paihang }}</view>
            <view class="tab_mine_name">排名</view>
          </view>
          <view class="tab_mine_item">
            <view class="tab_mine_num">{{ self.num }}</view>
            <view class="tab_mine_name">打卡次数</view>
          </view>
        </view>

        <!-- 排行榜 -->
        <view class="tab_mine2">
          <view class="ranking_item" v-for="(item, index) in list" :key="index">
            <view class="ranking_item_view">
              <view class="ranking_item_num">{{ ++index }}</view>
              <view class="ranking_item_img" v-if="item.user">
                <image
                  :src="item.user.avatar_url"
                  mode=""
                  class="head_img"
                ></image>
              </view>
              <view class="ranking_item_name" v-if="item.user">{{
                item.user.nick_name
              }}</view>
            </view>
            <view class="ranking_item_number">{{ item.num }}次</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import { tianxing, tianwen, tianxin } from "@/common/api/xingzhe.js";
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      listTab: [
        {
          name: "天行榜(研学)",
        },
        {
          name: "天问榜(星河)",
        },
        {
          name: "天心榜(微创)",
        },
      ],
      selected: 0,
      list: [],
      list1: [
        {
          name: "华胥星球",
          img: "../../static/images/pic_tllb_touxiang.png",
          num: 10,
        },
        {
          name: "华胥星球",
          img: "../../static/images/pic_tllb_touxiang.png",
          num: 10,
        },
        {
          name: "华胥星球",
          img: "../../static/images/pic_tllb_touxiang.png",
          num: 10,
        },
      ],
      list2: [
        {
          name: "华胥星球",
          img: "../../static/images/pic_yt_xingzhegushi_one.png",
          num: 10,
        },
        {
          name: "华胥星球",
          img: "../../static/images/pic_yt_xingzhegushi_one.png",
          num: 10,
        },
        {
          name: "华胥星球",
          img: "../../static/images/pic_yt_xingzhegushi_one.png",
          num: 10,
        },
      ],
      list3: [
        {
          name: "华胥星球",
          img: "../../static/images/pic_sy_jinrigengxin.png",
          num: 10,
        },
        {
          name: "华胥星球",
          img: "../../static/images/pic_sy_jinrigengxin.png",
          num: 10,
        },
        {
          name: "华胥星球",
          img: "../../static/images/pic_sy_jinrigengxin.png",
          num: 10,
        },
      ],
      scrollHeihgt: 0,
      type: 0,
      self: {},
      riqi: 0,
    };
  },
  created() {
    this.list = this.list1;
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".head").fields({
        size: true,
      });
      query.select(".box_tabs").fields({
        size: true,
      });
      query.select(".tab_view").fields({
        size: true,
      });
      query.exec((data) => {
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeihgt = windowHeihgt - sum - 30;
      });
    });
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList() {
      if (this.type == 0) {
        this.tianxing();
      } else if (this.type == 1) {
        this.tianwen();
      } else if (this.type == 2) {
        this.tianxin();
      }
      // this.tianwen()
      // this.tianxin()
    },
    tianxing() {
      tianxing({
        type: this.selected,
      })
        .then((res) => {
          console.log("ressss", res);
          this.list = res.data.data.data;
          this.self = res.data.data.self;
        })
        .catch((err) => {});
    },
    tianwen() {
      tianwen({
        type: this.selected,
      })
        .then((res) => {
          console.log("12resss", res);
          this.list = res.data.data.data;
          this.self = res.data.data.self;
        })
        .catch((err) => {});
    },
    tianxin() {
      tianxin({
        type: this.selected,
      })
        .then((res) => {
          console.log("rrrrrrrres12", res);
          this.list = res.data.data.data;
          this.self = res.data.data.self;
        })
        .catch((err) => {});
    },
    change(num) {
      this.selected = num;
      if (this.type == 0) {
        this.tianxing();
      } else if (this.type == 1) {
        this.tianwen();
      } else if (this.type == 2) {
        this.tianxin();
      }
      // if (num == 0) {
      // 	this.list = this.list1
      // } else if (num == 1) {
      // 	this.list = this.list2
      // } else if (num == 2) {
      // 	this.list = this.list3
      // } else if (num == 3) {
      // 	this.list = this.list1
      // } else if (num == 4) {
      // 	this.list = this.list2
      // }
    },
    click(e) {
      this.type = e.index;
      this.getList();
      console.log("tttteeee", e);
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #ff8a4c;
    font-size: 30rpx;
    display: flex;
    flex-direction: row-reverse;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444;
  }
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;

  .box_tabs {
    width: 100%;
  }

  .tab_view {
    background: #f7f8fa;
    border-radius: 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
    padding: 8rpx 12rpx;

    .tab_view_item {
      padding: 7rpx 34rpx;
      color: #888888;
      font-size: 28rpx;
      border-radius: 32rpx;
    }

    .tab_view_item_sel {
      background: #ffffff;
      color: #272727;
    }
  }

  .tab_mine {
    background: #f7f8fa;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 52rpx;
    margin-top: 24rpx;

    .tab_mine_item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }

      .tab_mine_name {
        font-size: 24rpx;
        color: #444444;
        margin-top: 16rpx;
      }

      .tab_mine_num {
        width: 88rpx;
        height: 88rpx;
        font-size: 50rpx;
        color: #444444;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tab_mine_num1 {
        height: 88rpx;
        font-size: 30rpx;
        color: #444444;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .tab_mine2 {
    background: #f7f8fa;
    border-radius: 16rpx;
    padding: 24rpx 52rpx;
    margin-top: 24rpx;

    .ranking_item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32rpx;

      .ranking_item_view {
        display: flex;
        align-items: center;

        .ranking_item_num {
          width: 39rpx;
          height: 54rpx;
          font-size: 36rpx;
          color: #444444;
          text-align: center;
          line-height: 54rpx;
        }

        .ranking_item_img {
          width: 80rpx;
          height: 80rpx;
          margin-left: 16rpx;

          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
        }

        .ranking_item_name {
          font-size: 30rpx;
          color: #444444;
          margin-left: 24rpx;
        }

        .ranking_item_number {
          font-size: 26rpx;
          color: #444444;
        }
      }
    }
  }
}

/deep/ .u-tabs__wrapper__nav__item__text {
	text-align: center !important;
}
/deep/.u-tabs__wrapper__nav__line {
	bottom: 0 !important;
}
</style>